<template>
  <div class="wrapper">
    <div class="container">
      <div class="content">
        <p class="slogan">中药先进制药与信息化技术融合</p>
        <div class="form-container">
          <div class="table">
            <div class="table-tr">
              <div class="table-th">
                <span @click="loginStyle = 2">扫描登录</span>
              </div>
              <div class="table-th">
                <span @click="loginStyle = 1">账号登录</span>
              </div>
            </div>
          </div>
          <div class="form">
            <div class="input-group" v-if="this.loginStyle == 1">
              <el-input placeholder="请输入账号" v-model="form.userName">
                <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
              </el-input>
              <el-input placeholder="请输入密码" v-model="form.userPass" type="password">
                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
              <el-button type="primary" plain @click="userLogin">
                <span>登录</span>
              </el-button>
            </div>
            <div class="scan-group" v-if="this.loginStyle == 2">
              <div class="image-wrapper">
                <img :src="this.theLoginCode" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserApi from '@/api/userApi'
import mixins from '@/mixins'
import {  toRouter } from '@/permission'
import ScanApi from '@/api/scan'
export default {
  mixins:[mixins],
  name: "Login",
  data() {
    return {
      loginStyle:1,
      // 登陆二维码
      theLoginCode:'',
      // 登陆随机码
      loginRandom:'',
      // 登陆账号密码表单
      form:{
        userName:"",
        userPass:""
      },
      isScan: false,
      timer:''
    }
  },
  methods: {
    // 用户登录
    userLogin() {
      UserApi.userLogins(this.form).then(res => {
        if(res.data.status === "200"){
          // 保存用户token
          this.setUserToken(res.data.data)
          // 将值存在localstorage
          localStorage.setItem("uname",this.form.userName)
          toRouter()
        }
      }).catch(() => {
          this.$message.error('服务器异常')
      })
    },
    // 检测用户是否授权登录成功
    checkLoginStatus(){
      ScanApi.checkLoginStatus(this.loginRandom).then(res => {

      })
    },
    // 登陆二维码获取
    getLoginCode(){
      ScanApi.getLoginCode().then(res => {
        this.theLoginCode = res.data.qCodeImg
        this.loginRandom = res.data.randomChar
        this.timer = setInterval(() => {
          this.checkLoginStatus()
        },3000)
      })
    }
  },
  watch:{
    loginStyle:function(newV,oldV){
      if(newV === 2){
        this.getLoginCode()
      }else{
        // 摧毁timer
        clearInterval(this.timer)
      }
    }
  },
  created() {

  }
};
</script>
<style scoped lang="less">
.wrapper {
  margin-top: 200px;
  height: 450px;
  width: 100%;
}
.container {
  position: relative;
  height: 100%;
  width: 100%;

  // max-width: 1599px;
  width: 100%;
  margin: 0 auto;
  background: url("../../assets/img/login/login.png") no-repeat;
  background-position: center;
}
@media screen and (min-width: 1200px) {
  .content {
    position: absolute;
    width: 700px;
    margin-top: 50px;
    right: 220px;
  }
}

.slogan {
  left: 100px;
  text-align: center;
  font-family: "华文新魏 Bold", "华文新魏";
  font-weight: 700;
  font-size: 48px;
}
@media screen and (max-width: 768px) {
  .slogan {
    letter-spacing: 2px;
    font-size: 6vw;
  }
}
.form-container {
  height: 283px;
  width: 285px;
  margin: 36px auto;
  background-image: url("../../assets/img/login/opacity.svg");
}
.table {
  display: table;
  padding: 30px 0;
  width: 80%;
  margin: 0 auto;
}
.table-tr {
  display: table-row;
}
.table-th {
  display: table-cell;
  text-align: center;

  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  span {
    cursor: pointer;
  }
  span:hover {
    color: #fff5ff;
  }
}

.form {
  width: 80%;
  margin: 0 auto;
}
.el-input {
  margin-bottom: 20px;
  i {
    color: black;
  }
}
.el-button {
  width: 100%;
  span {
    letter-spacing: 8px;
  }
}
.image-wrapper {
  width: 177px;
  height: 170px;
  margin: 0 auto;
  img {
    height: 100%;
    width: 100%;
  }
}
</style>
